<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
 *{
    margin: 0;
    padding: 0;
}
        .box{
    width: 560px;
    height: 40px;
    background-color: pink;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}
textarea{
    width: 400px;
    height: 30px;
    transition: all 0.7s;
}
button{
    width: 50px;
    height: 30px;
    color: aliceblue;
    background-color:rgb(0, 183, 255);
    border: 0;
}
textarea:focus{
    height: 100px;

}
span{
    margin-left: 820px;
    transition: all 0.7s;
    
}
    </style>
</head>
<body>
    <div class="box">
        <img src="">
        <textarea placeholder="发一条有趣的评论" maxlength="200"></textarea>
        <button>发布</button>
    </div>
    <span>0/200字</span>
    <script>
const tx=document.querySelector('textarea')
const span=document.querySelector('span')
tx.addEventListener('input',function(){
span.innerHTML=`${tx.value.length}/200字`
})
tx.addEventListener('focus',function(){
span.style.opacity=1
})
tx.addEventListener('blur',function(){
span.style.opacity=0
})
    </script>
</body>
</html>